<template>
  <div class="countdown-days-container">
    <div class="countdown-days-page">
      <!-- 背景装饰 -->
      <div class="bg-decoration">
        <div class="bg-circle bg-circle-1"></div>
        <div class="bg-circle bg-circle-2"></div>
        <div class="bg-circle bg-circle-3"></div>
      </div>
      <el-container>
        <el-header class="header">
          <div class="header-content">
            <!-- 正常状态：显示返回按钮、分类选择器 -->
            <template v-if="!isSearching">
              <el-button @click="$router.push('/dashboard')" icon="ArrowLeft">
                返回
              </el-button>
              <div class="category-selector" @click="toggleCategoryModal">
                <span class="category-title">{{ currentCategoryTitle }}</span>
                <el-icon><ArrowDown /></el-icon>
              </div>
              <div class="search-section">
                <el-button 
                  v-if="!isSearching" 
                  @click="startSearch" 
                  type="text"
                  class="search-toggle-btn"
                >
                  <el-icon><Search /></el-icon>
                </el-button>
              </div>
            </template>
            
            <!-- 搜索状态：显示搜索输入框 -->
            <template v-else>
              <div class="search-full-container">
                <el-input
                  v-model="searchKeyword"
                  placeholder="搜索事件..."
                  size="large"
                  @input="handleSearch"
                  ref="searchInput"
                  class="search-full-input"
                >
                  <template #prefix>
                    <el-icon class="search-icon"><Search /></el-icon>
                  </template>
                  <template #suffix>
                    <el-button 
                      @click="cancelSearch" 
                      type="text"
                      class="cancel-search-btn"
                    >
                      <el-icon><Close /></el-icon>
                    </el-button>
                  </template>
                </el-input>
              </div>
            </template>
          </div>
        </el-header>
        
        <el-main class="main">
          <div class="events-container">
            <!-- 搜索提示词显示 -->
            <div v-if="searchKeyword && filteredEvents.length > 0" class="search-tip">
              <el-icon class="search-tip-icon"><Search /></el-icon>
              <span class="search-tip-text">找到 {{ filteredEvents.length }} 个相关事件</span>
            </div>
            
            <div v-if="filteredEvents.length === 0" class="empty-state">
              <el-empty 
                :description="searchKeyword ? '未找到相关事件' : '暂无事件'" 
                :image="searchKeyword ? 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' : undefined"
              >
                <template #description>
                  <div class="empty-description">
                    <p v-if="searchKeyword" class="search-empty-text">
                      未找到包含"{{ searchKeyword }}"的事件
                    </p>
                    <p v-else-if="currentCategory.id !== 'all'" class="category-empty-text">
                      "{{ currentCategory.name }}"分类下暂无事件
                    </p>
                    <p v-else class="all-empty-text">
                      还没有创建任何事件
                    </p>
                  </div>
                </template>
              </el-empty>
            </div>
            <div v-else class="events-list">
              <div 
                v-for="(event, index) in filteredEvents" 
                :key="event.id"
                class="event-item"
                :class="{ pinned: event.is_pinned }"
              >
                <!-- 左文字区域 (占比约70%) -->
                <div class="event-text-area" @click="editEvent(event)">
                  <div class="event-header">
                    <span v-if="event.is_pinned" class="event-pinned">
                      <el-icon><Star /></el-icon>
                    </span>
                  </div>
                  <div class="event-status">
                    <!-- {{ getEventStatus(event.target_date).text }} -->
                    {{ getEventStatus(event.target_date).text === '已经过去' ? '' : getEventStatus(event.target_date).text }}
                    <span class="event-name">「{{ event.title }}」</span>
                    {{ getEventStatus(event.target_date).text === '距离' ? '还有' : '' }}
                     {{ getEventStatus(event.target_date).text === '已经过去' ? getEventStatus(event.target_date).text : '' }}

                  </div>
                </div>
                
                <!-- 右彩块区域 (占比约30%) -->
                <div 
                  class="event-days-block"
                  :class="{ past: getEventStatus(event.target_date).isPast, future: !getEventStatus(event.target_date).isPast }"
                >
                  <div class="days-number">{{ getEventStatus(event.target_date).days }}</div>
                  <div class="days-unit">天</div>
                </div>
                
                <!-- 滑动操作按钮 -->
                <div class="event-actions">
                  <!-- 排序按钮 -->
                  <button 
                    class="move-up-btn" 
                    @click.stop="moveEventUp(index)"
                    :disabled="index === 0"
                    title="上移"
                  >
                    <el-icon><ArrowUp /></el-icon>
                  </button>
                  <button 
                    class="move-down-btn" 
                    @click.stop="moveEventDown(index)"
                    :disabled="index === filteredEvents.length - 1"
                    title="下移"
                  >
                    <el-icon><ArrowDown /></el-icon>
                  </button>
                  <button class="edit-btn" @click.stop="editEvent(event)">
                    <el-icon><Edit /></el-icon>
                  </button>
                  <button class="delete-btn" @click.stop="deleteEvent(event)">
                    <el-icon><Delete /></el-icon>
                  </button>
                </div>
              </div>
              
              <!-- 加载更多指示器 -->
              <div v-if="loading" class="loading-indicator">
                <el-icon class="loading-icon"><Loading /></el-icon>
                <span>加载中...</span>
              </div>
              <div v-else-if="!hasMore && filteredEvents.length > 0" class="no-more-indicator">
                <span>没有更多事件了</span>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
      
      <!-- 分类管理弹窗 -->
      <el-dialog
        v-model="showCategoryModal"
        title="分类管理"
        :close-on-click-modal="true"
        class="category-modal"
        center
        append-to-body
      >
        <div class="category-list">
          <div 
            v-for="(category, index) in categories" 
            :key="category.id"
            class="category-item"
          >
            <div class="category-info" @click="selectCategory(category)">
              <span class="category-name">{{ category.name }}</span>
              <span class="category-count">({{ category.event_count }})</span>
            </div>
            <div class="category-actions">
              <el-icon v-if="category.id === currentCategory.id" class="current-category-icon"><Check /></el-icon>
              
              <!-- 排序按钮（仅对自定义分类显示） -->
              <div v-if="category.id !== 'all' && category.id !== 'uncategorized'" class="category-sort-buttons">
                <button 
                  class="move-up-btn" 
                  @click.stop="moveCategoryUp(index)"
                  :disabled="index <= 1"
                  title="上移"
                >
                  <el-icon><ArrowUp /></el-icon>
                </button>
                <button 
                  class="move-down-btn" 
                  @click.stop="moveCategoryDown(index)"
                  :disabled="index >= categories.length - 1"
                  title="下移"
                >
                  <el-icon><ArrowDown /></el-icon>
                </button>
              </div>
              
              <el-button 
                v-if="category.id !== 'all' && category.name !== '未分组'"
                @click.stop="deleteCategory(category)"
                type="danger" 
                size="small" 
                text
                class="delete-category-btn"
              >
                <el-icon><Delete /></el-icon>
              </el-button>
            </div>
          </div>
        </div>
        
        <template #footer>
          <div class="category-modal-actions">
            <el-button @click="showCreateCategoryDialog = true" type="primary">
              新建分类
            </el-button>
            <el-button @click="showCategoryModal = false">关闭</el-button>
          </div>
        </template>
      </el-dialog>
      
      <!-- 新建分类对话框 -->
      <el-dialog
        v-model="showCreateCategoryDialog"
        title="新建分类"
        width="300px"
        :close-on-click-modal="false"
        append-to-body
      >
        <el-input
          v-model="newCategoryName"
          placeholder="请输入分类名称"
          @keyup.enter="createCategory"
        />
        <template #footer>
          <el-button @click="showCreateCategoryDialog = false">取消</el-button>
          <el-button @click="createCategory" type="primary">确定</el-button>
        </template>
      </el-dialog>
      
      <!-- 添加/编辑事件模态框 -->
      <el-dialog
        v-model="showEventModal"
        :title="editingEvent ? '编辑事件' : '添加事件'"
        :close-on-click-modal="false"
        class="event-modal"
        center
        append-to-body
      >
        <el-form :model="eventForm" >
          <el-form-item label="内容" required>
            <el-input v-model="eventForm.name" placeholder="请输入内容" />
          </el-form-item>
          
          <el-form-item label="分组" required>
            <el-select v-model="eventForm.category_id" placeholder="选择分组" style="width: 100%">
              <el-option 
                v-for="category in categories.filter(c => c.id !== 'all')" 
                :key="category.id"
                :label="category.name"
                :value="category.id"
              />
            </el-select>
          </el-form-item>
          
          <el-form-item label="日期" required>
            <el-date-picker
              v-model="eventForm.target_date"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
            />
          </el-form-item>
          
          <el-form-item label="阴 历">
            <el-checkbox v-model="eventForm.is_lunar">使用阴历日期</el-checkbox>
          </el-form-item>
          
          <el-form-item label="重 复">
            <el-select v-model="eventForm.repeat_type" placeholder="选择重复类型" style="width: 100%">
              <el-option label="永不" value="never" />
              <el-option label="每天" value="daily" />
              <el-option label="每周" value="weekly" />
              <el-option label="每月" value="monthly" />
              <el-option label="每年" value="yearly" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="置 顶">
            <el-checkbox v-model="eventForm.is_pinned">置顶显示</el-checkbox>
          </el-form-item>
        </el-form>
        
        <template #footer>
          <el-button @click="showEventModal = false">取消</el-button>
          <el-button @click="saveEvent" type="primary">保存</el-button>
        </template>
      </el-dialog>
    </div>
    
    <!-- 悬浮新增按钮 -->
    <div class="fab-button" @click="createEvent">
      <el-icon><Plus /></el-icon>
    </div>
    
    <!-- 悬浮回到顶部按钮 -->
    <div 
      v-show="showBackToTop" 
      class="back-to-top-button" 
      @click="scrollToTop"
    >
      <el-icon><ArrowUp /></el-icon>
    </div>
  </div>
</template>

<script setup>
import { onBeforeUnmount,ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowDown, ArrowUp, Search, Plus, Check, Delete, Close, Star, Edit, Loading } from '@element-plus/icons-vue'
import request from '../utils/request'

// 数据状态
const events = ref([])
const categories = ref([])
const currentCategory = ref({ id: 'all', name: '全部' })
const searchKeyword = ref('')
const isSearching = ref(false)

// 分页相关状态
const page = ref(1)
const hasMore = ref(true)
const loading = ref(false)

// 弹窗状态
const showCategoryModal = ref(false)
const showCreateCategoryDialog = ref(false)
const showEventModal = ref(false)
const newCategoryName = ref('')
const editingEvent = ref(null)
const eventForm = ref({
  name: '',
  category_id: null,
  target_date: '',
  is_lunar: false,
  repeat_type: 'never',
  is_pinned: false
})

// 回到顶部按钮状态
const showBackToTop = ref(false)

// 计算属性
const currentCategoryTitle = computed(() => {
  return currentCategory.value.name || '全部'
})

const filteredEvents = computed(() => {
  let filtered = events.value
  
  // 如果在搜索模式下，搜索所有事件，否则按分类过滤
  if (searchKeyword.value.trim()) {
    // 搜索模式下，搜索所有事件
    const keyword = searchKeyword.value.toLowerCase()
    filtered = filtered.filter(event => 
      event.title.toLowerCase().includes(keyword)
    )
  } else {
    // 非搜索模式下，按分类过滤
    if (currentCategory.value.id !== 'all') {
      filtered = filtered.filter(event => event.category_id === currentCategory.value.id)
    }
  }
  
  // 三优先级排序：置顶状态 > 手动排序 > 目标日期
  return filtered.sort((a, b) => {
    // 第一优先级：置顶状态（置顶的排在前面）
    if (a.is_pinned && !b.is_pinned) return -1
    if (!a.is_pinned && b.is_pinned) return 1
    
    // 第二优先级：手动排序（sort_order小的排在前面）
    if (a.sort_order !== b.sort_order) {
      return a.sort_order - b.sort_order
    }
    
    // 第三优先级：目标日期（距离现在越近的越靠前）
    return new Date(a.target_date) - new Date(b.target_date)
  })
})

// 计算剩余天数
const calculateRemainingDays = (targetDate) => {
  const today = new Date()
  const target = new Date(targetDate)
  const diffTime = target.getTime() - today.getTime()
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
  return diffDays
}

const getEventStatus = (targetDate) => {
  const days = calculateRemainingDays(targetDate)
  if (days === 0) {
    return { text: '今天就是', days: 0, isPast: true }
  } else if (days > 0) {
    return { text: '距离', days, isPast: false }
  } else {
    return { text: '已经过去', days: Math.abs(days), isPast: true }
  }
}

const getCategoryName = (categoryId) => {
  if (!categoryId) return '未分组'
  const category = categories.value.find(c => c.id === categoryId)
  return category ? category.name : '未分组'
}

// 手动排序方法
const moveEventUp = async (index) => {
  if (index <= 0) return // 已经是第一个，不能上移
  
  // 创建事件副本
  const eventsCopy = [...events.value]
  
  // 获取当前事件和上一个事件
  const currentEvent = eventsCopy[index]
  const prevEvent = eventsCopy[index - 1]
  
  // 交换位置
  eventsCopy[index] = prevEvent
  eventsCopy[index - 1] = currentEvent
  
  // 更新事件顺序
  events.value = eventsCopy
  
  // 保存到后端
  await saveEventsOrder()
  
  // 1 秒后自动消失 (1000 毫秒)
ElMessage.success({
  message: '事件顺序已更新',
  duration: 350 
});
}

const moveEventDown = async (index) => {
  if (index >= events.value.length - 1) return // 已经是最后一个，不能下移
  
  // 创建事件副本
  const eventsCopy = [...events.value]
  
  // 获取当前事件和下一个事件
  const currentEvent = eventsCopy[index]
  const nextEvent = eventsCopy[index + 1]
  
  // 交换位置
  eventsCopy[index] = nextEvent
  eventsCopy[index + 1] = currentEvent
  
  // 更新事件顺序
  events.value = eventsCopy
  
  // 保存到后端
  await saveEventsOrder()
  
  // 1 秒后自动消失 (1000 毫秒)
ElMessage.success({
  message: '事件顺序已更新',
  duration: 350 
});
}

const saveEventsOrder = async () => {
  try {
    // 更新每个事件的sort_order字段，确保与前端显示顺序一致
    const updatedEvents = events.value.map((event, index) => ({
      ...event,
      sort_order: index // 更新sort_order为当前索引
    }))
    
    // 更新前端数据，确保sort_order字段同步
    events.value = updatedEvents
    
    const orderData = updatedEvents.map((event, index) => ({
      id: event.id,
      order: index // 前端发送的字段名保持为order，后端会映射到sort_order
    }))
    
    await request.put('/events/reorder', { events: orderData })
  } catch (error) {
    console.error('保存事件顺序失败:', error)
    ElMessage.error({ message: '保存顺序失败', duration: 350 })
  }
}

// API调用方法
const loadCategories = async () => {
  try {
    const response = await request.get('/categories')
    // 前端默认分类：全部
    // 后端自动创建：未分组（作为默认分类）
    categories.value = [
      { id: 'all', name: '全部', event_count: events.value.length },
      ...response.data.categories
    ]
  } catch (error) {
    console.error('加载分类失败:', error)
    ElMessage.error({ message: '加载分类失败', duration: 350 })
  }
}

const loadEvents = async (isLoadMore = false,HandleSearch= false) => {
  // 防止重复加载
  if (loading.value && !isLoadMore) {
    return
  }
  
  if (!isLoadMore) {
    // 首次加载时重置分页状态
    resetPagination()
    loading.value = true
  }
  
  try {
    // 构建请求参数
    const params = {
      page: page.value,
      limit: HandleSearch?99999:10
    }
    
    // 如果当前不是"全部"分类，添加分类ID参数
    if (currentCategory.value.id !== 'all') {
      params.categoryId = currentCategory.value.id
    }
    
    const response = await request.get('/events', { params })
    
    if (isLoadMore) {
      // 加载更多时追加数据
      events.value = [...events.value, ...response.data.events]
    } else {
      // 首次加载时替换数据
      events.value = response.data.events
    }
    
    // 更新分页状态：页码加1，设置是否有更多数据
    page.value += 1
    hasMore.value = response.data.pagination.hasMore
    
    await loadCategories() // 重新加载分类以更新计数
  } catch (error) {
    console.error('加载事件失败:', error)
    ElMessage.error({ message: '加载事件失败', duration: 350 })
    
    // 加载失败时重置分页状态
    if (!isLoadMore) {
      resetPagination()
    }
  } finally {
    if (!isLoadMore) {
      loading.value = false
    }
  }
}



const createCategory = async () => {
  if (!newCategoryName.value.trim()) {
    ElMessage.warning({ message: '请输入分类名称', duration: 350 })
    return
  }
  
  try {
    await request.post('/categories', {
      name: newCategoryName.value.trim()
    })
    ElMessage.success({
      message: '分类创建成功',
      duration: 350 
    });
    // ElMessage.success('分类创建成功')
    newCategoryName.value = ''
    showCreateCategoryDialog.value = false
    await loadCategories()
  } catch (error) {
    console.error('创建分类失败:', error)
    ElMessage.error({ message: '创建分类失败', duration: 350 })
  }
}

const deleteCategory = async (category) => {
  try {
    // 前端检查：防止删除默认分类
    if (category.name === '未分组') {
      ElMessage.warning({ message: '默认分类不能删除', duration: 350 })
      return
    }
    
    await ElMessageBox.confirm(
      `确定要删除分类"${category.name}"吗？该分类下的事件将移动到未分组。`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    await request.delete(`/categories/${category.id}`)
    ElMessage.success({
        message: '分类删除成功',
        duration: 350 
      });
    
    // 如果当前选中的是被删除的分类，切换到全部
    if (currentCategory.value.id === category.id) {
      currentCategory.value = { id: 'all', name: '全部' }
    }
    
    await loadEvents()
    showCategoryModal.value = false
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除分类失败:', error)
      // 显示后端返回的错误信息
      if (error.response?.data?.error) {
        ElMessage.error({ message: error.response.data.error, duration: 350 })
      } else {
        ElMessage.error({ message: '删除分类失败', duration: 350 })
      }
    }
  }
}

// 分类排序方法
const moveCategoryUp = async (index) => {
  if (index <= 1) return // 第一个是"全部"，不能上移
  
  // 交换当前分类和上一个分类的位置
  await reorderCategories(index, index - 1)
}

const moveCategoryDown = async (index) => {
  if (index >= categories.value.length - 1) return // 已经是最后一个，不能下移
  
  // 交换当前分类和下一个分类的位置
  await reorderCategories(index, index + 1)
}

const reorderCategories = async (fromIndex, toIndex) => {
  // 创建分类副本，排除"全部"
  const customCategories = categories.value.filter(c => c.id !== 'all')
  
  // 获取要移动的分类（注意：前端显示索引包含固定分类，但自定义分类数组索引从0开始）
  const movedCategory = customCategories[fromIndex - 1] // 减去第一个固定分类
  
  if (!movedCategory) return
  
  // 重新排序自定义分类
  const reorderedCategories = [...customCategories]
  const [removed] = reorderedCategories.splice(fromIndex - 1, 1)
  
  // 计算目标位置在自定义分类数组中的索引
  const targetIndex = toIndex - 1
  
  // 确保目标索引在有效范围内
  if (targetIndex < 0) {
    reorderedCategories.splice(0, 0, removed)
  } else if (targetIndex >= reorderedCategories.length) {
    reorderedCategories.push(removed)
  } else {
    reorderedCategories.splice(targetIndex, 0, removed)
  }
  
  // 更新排序序号
  const orderData = reorderedCategories.map((category, index) => ({
    id: category.id,
    order: index + 1 // 从1开始排序
  }))
  
  try {
    await request.put('/categories/reorder', { categories: orderData })
    
    // 重新加载分类
    await loadCategories()
    
    // ElMessage.success('分类顺序已更新')
    ElMessage.success({
      message: '分类顺序已更新',
      duration: 350 
    });
  } catch (error) {
    console.error('更新分类顺序失败:', error)
    ElMessage.error({ message: '更新分类顺序失败', duration: 350 })
  }
}

const createEvent = () => {
  editingEvent.value = null
  
  // 根据当前选中的分类设置默认分类
  let defaultCategoryId = null
  if (currentCategory.value.id === 'all') {
    // 在"全部"标签下添加事件时，默认选择"未分组"分类
    // 查找后端返回的分类中名为"未分组"的分类
    const uncategorizedCategory = categories.value.find(cat => cat.name === '未分组' && cat.id !== 'all')
    if (uncategorizedCategory) {
      defaultCategoryId = uncategorizedCategory.id
    }
  } else {
    defaultCategoryId = currentCategory.value.id
  }
  
  eventForm.value = {
    name: '',
    category_id: defaultCategoryId,
    target_date: '',
    is_lunar: false,
    repeat_type: 'never',
    is_pinned: false
  }
  showEventModal.value = true
}

const editEvent = (event) => {
  editingEvent.value = event
  eventForm.value = { 
    name: event.title, // 将后端的title字段映射到前端的name字段
    category_id: event.category_id,
    target_date: event.target_date,
    is_lunar: event.is_lunar || false,
    repeat_type: event.repeat_type || 'never',
    is_pinned: event.is_pinned || false
  }
  showEventModal.value = true
}

const saveEvent = async () => {
  if (!eventForm.value.name.trim()) {
    ElMessage.warning({ message: '请输入事件内容', duration: 350 })
    return
  }
  
  if (!eventForm.value.target_date) {
    ElMessage.warning({ message: '请选择日期', duration: 350 })
    return
  }
  
  try {
    // 准备发送给后端的数据，将name字段转换为title字段
    const eventData = {
      title: eventForm.value.name.trim(),
      category_id: eventForm.value.category_id,
      target_date: eventForm.value.target_date,
      is_pinned: eventForm.value.is_pinned
    }
    
    if (editingEvent.value) {
      // 更新事件
      await request.put(`/events/${editingEvent.value.id}`, eventData)
      // ElMessage.success('事件更新成功')
      ElMessage.success({
        message: '事件更新成功',
        duration: 350 
      });
    } else {
      // 创建事件
      await request.post('/events', eventData)
      // ElMessage.success('事件创建成功')
       ElMessage.success({
        message: '事件创建成功',
        duration: 350 
      });
    }
    
    showEventModal.value = false
    await loadEvents()
  } catch (error) {
    console.error('保存事件失败:', error)
    ElMessage.error({ message: '保存事件失败', duration: 350 })
  }
}

const deleteEvent = async (event) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除事件"${event.title}"吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    await request.delete(`/events/${event.id}`)
     ElMessage.success({
        message: '事件删除成功',
        duration: 350 
      });
    await loadEvents()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除事件失败:', error)
      ElMessage.error({ message: '删除事件失败', duration: 350 })
    }
  }
}

// UI交互方法
const toggleCategoryModal = () => {
  showCategoryModal.value = !showCategoryModal.value
}

const selectCategory = (category) => {
  currentCategory.value = category
  showCategoryModal.value = false
  saveCategoryState(category) // 保存选中的分类
  
  // 分类切换时重置分页状态并重新加载事件
  resetPagination()
  loadEvents()
}

// 从localStorage获取存储的分类
const getStoredCategoryState = () => {
  try {
    const stored = localStorage.getItem('countdown-current-category')
    return stored ? JSON.parse(stored) : null
  } catch (error) {
    console.error('读取分类状态失败:', error)
    return null
  }
}

// 将分类状态保存到localStorage
const saveCategoryState = (category) => {
  try {
    localStorage.setItem('countdown-current-category', JSON.stringify(category))
  } catch (error) {
    console.error('保存分类状态失败:', error)
  }
}

const searchInput = ref(null)

const startSearch = () => {
  isSearching.value = true
  nextTick(() => {
    if (searchInput.value) {
      searchInput.value.focus()
    }
  })
}

const cancelSearch = () => {
  isSearching.value = false
  searchKeyword.value = ''
}

const handleSearch = () => {
  // 搜索时重置分页状态并重新加载数据
  resetPagination()
  // 搜索时强制重新加载，不使用缓存
  loadEvents(false,true)
}

// 滚动监听方法 - 下滑加载更多和显示回到顶部按钮
const handleScroll = () => {
  //  console.log("handleScroll：触发滚动")
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
  const clientHeight = document.documentElement.clientHeight || window.innerHeight
  
  // 控制回到顶部按钮显示
  showBackToTop.value = scrollTop > 200
  
  // 只有在非加载状态且有更多数据时才触发加载更多
  if (loading.value || !hasMore.value) return
  
  // 距离底部100px时触发加载
  if (scrollTop + clientHeight >= scrollHeight - 100) {
    // console.log("handleScroll：距离底部100px，成功触发加载")
    loadMoreEvents()
  }
}

// 回到顶部方法
const scrollToTop = () => {
  const scrollElement = document.documentElement || document.body
  const scrollTop = scrollElement.scrollTop
  const targetScrollTop = 0
  const duration = 500 // 动画持续时间（毫秒）
  const startTime = performance.now()
  
  const animateScroll = (currentTime) => {
    const elapsed = currentTime - startTime
    const progress = Math.min(elapsed / duration, 1)
    
    // 使用easeInOutCubic缓动函数
    const easeProgress = progress < 0.5 
      ? 4 * progress * progress * progress 
      : 1 - Math.pow(-2 * progress + 2, 3) / 2
    
    const currentScrollTop = scrollTop + (targetScrollTop - scrollTop) * easeProgress
    scrollElement.scrollTop = currentScrollTop
    
    if (progress < 1) {
      requestAnimationFrame(animateScroll)
    }
  }
  
  requestAnimationFrame(animateScroll)
}

// 加载更多事件
const loadMoreEvents = async () => {
  if (loading.value || !hasMore.value) return
  
  loading.value = true
  try {
    await loadEvents(true) // 调用loadEvents并传入isLoadMore=true
  } catch (error) {
    console.error('加载更多事件失败:', error)
    ElMessage.error({ message: '加载更多事件失败', duration: 350 })
  } finally {
    loading.value = false
  }
}

// 重置分页状态
const resetPagination = () => {
  page.value = 1
  hasMore.value = true
  events.value = []
}

onMounted(async () => {
  
  
  // 先加载分类数据
  await loadCategories()
  
  // 然后加载本地存储的分类状态
  const storedCategory = getStoredCategoryState()
  if (storedCategory) {
    // 检查存储的分类是否存在
    const categoryExists = categories.value.some(cat => cat.id === storedCategory.id)
    if (categoryExists) {
      currentCategory.value = storedCategory
    }
  }
  
  // console.log("onMounted：初始成功，加载当前分页数据")
  //重置分页状态并重新加载数据
  resetPagination()
  // 根据当前分类加载数据
  await loadEvents()

  // 最后添加滚动监听（防止干扰加载分类数据）
  window.addEventListener('scroll', handleScroll)
})

// 组件卸载时移除滚动监听
// onUnmounted(() => {
//   window.removeEventListener('scroll', handleScroll)
// })
// 组件即将销毁，但 DOM 仍完整存在
onBeforeUnmount(() => {
   window.removeEventListener('scroll', handleScroll)
});
</script>

<style scoped>
.countdown-days-page {
  min-height: 100vh;
  background: 
    linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%),
    url('/api/getBaiduImage') center/cover no-repeat;
  position: relative;
  transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1), backdrop-filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(0px);
  padding: 0;
  margin: 0;
}

/* 深色主题下的背景 */
.dark-theme .countdown-days-page {
  background: 
    linear-gradient(135deg, rgba(26, 26, 46, 0.1) 0%, rgba(22, 33, 62, 0.1) 100%),
    url('/api/getBaiduImage') center/cover no-repeat;
  backdrop-filter: blur(0px);
}

.bg-decoration {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.bg-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  animation: float 6s ease-in-out infinite;
  transition: background 0.3s ease;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.bg-circle-1 {
  width: 200px;
  height: 200px;
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.bg-circle-2 {
  width: 150px;
  height: 150px;
  top: 60%;
  right: 15%;
  animation-delay: 2s;
}

.bg-circle-3 {
  width: 100px;
  height: 100px;
  top: 80%;
  left: 25%;
  animation-delay: 4s;
}

/* 悬浮动画 */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

/* 深色主题下的悬浮动画 */
@keyframes floatDark {
  0%, 100% { 
    transform: translateY(0px) scale(1);
    opacity: 0.05;
  }
  50% { 
    transform: translateY(-15px) scale(1.05);
    opacity: 0.08;
  }
}

/* 主容器样式 */
.countdown-days-container {
  width: 100%;
  min-height: 100vh;
  position: relative;
}

/* 深色主题下的背景装饰 */
.dark-theme .bg-circle {
  animation: floatDark 8s ease-in-out infinite;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.05);
}

.header {
    background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  z-index: 10;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  color: white;
  padding: 0 20px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

/* 返回按钮样式 */
.header .el-button {
  color: white;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 8px 16px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  font-weight: 500;
}

.header .el-button:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

/* 深色主题下的头部样式 */
.dark-theme .header {
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(10px) !important;
}

/* 深色主题下的按钮样式 */
.dark-theme .header .el-button {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

/* 深色主题下的分类选择器样式 */
.dark-theme .category-selector {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.dark-theme .category-selector:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}

.dark-theme .category-title {
  color: white !important;
}

/* 深色主题下的搜索相关样式 */
.dark-theme .search-toggle-btn {
  color: rgba(255, 255, 255, 0.9) !important;
}

.dark-theme .search-toggle-btn:hover {
  color: white !important;
}

.dark-theme .search-full-input .el-input__wrapper {
  background-color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

.dark-theme .search-full-input .el-input__wrapper:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
}

.dark-theme .search-full-input .el-input__wrapper.is-focus {
  box-shadow: 0 6px 24px rgba(102, 126, 234, 0.35) !important;
  border-color: rgba(102, 126, 234, 0.4) !important;
}

.dark-theme .search-full-input .el-input__inner {
  color: #333 !important;
}

.dark-theme .search-full-input .el-input__inner::placeholder {
  color: #999 !important;
}

/* 深色主题下的主容器样式 */
.dark-theme .main {
  background: rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(5px) !important;
}

/* 深色主题下的搜索提示样式 */
.dark-theme .search-tip {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(102, 126, 234, 0.3) !important;
  color: #333 !important;
}

.dark-theme .search-tip-icon {
  color: #667eea !important;
}

.dark-theme .search-tip-text {
  color: #667eea !important;
}

/* 深色主题下的加载指示器样式 */
.dark-theme .loading-indicator {
  color: rgba(255, 255, 255, 0.7) !important;
}

.dark-theme .loading-icon {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* 深色主题下的无更多指示器样式 */
.dark-theme .no-more-indicator {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* 深色主题下的空状态样式 */
.dark-theme .empty-state {
  color: rgba(255, 255, 255, 0.7) !important;
}

.dark-theme .search-empty-text {
  background: linear-gradient(135deg, rgba(245, 108, 108, 0.1) 0%, rgba(230, 162, 60, 0.1) 100%) !important;
  border-color: rgba(245, 108, 108, 0.3) !important;
  color: #ff7875 !important;
}

.dark-theme .category-empty-text {
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.1) 0%, rgba(100, 108, 255, 0.1) 100%) !important;
  border-color: rgba(64, 158, 255, 0.3) !important;
  color: #66b1ff !important;
}

.dark-theme .all-empty-text {
  background: linear-gradient(135deg, rgba(103, 194, 58, 0.1) 0%, rgba(144, 147, 153, 0.1) 100%) !important;
  border-color: rgba(103, 194, 58, 0.3) !important;
  color: #85ce61 !important;
}

/* 深色主题下的事件列表样式 */
.dark-theme .events-list {
  color: rgba(255, 255, 255, 0.9) !important;
}

.dark-theme .event-item {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.dark-theme .event-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(102, 126, 234, 0.5) !important;
  color: white !important;
}

.dark-theme .event-item.pinned {
  border-left-color: #e6a23c !important;
}

.dark-theme .event-item::before {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%) !important;
}

/* 深色主题下的事件天数块样式 */
.dark-theme .event-days-block {
  background: rgba(255, 255, 255, 0.02) !important;
}

.dark-theme .event-days-block:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.1) !important;
}

.dark-theme .event-days-block.future .days-number {
  background: #5489f8 !important;
  color: #ffffff !important;
}

.dark-theme .event-days-block.future .days-unit {
  background: #4378e8 !important;
  color: #ffffff !important;
}

.dark-theme .event-days-block.past .days-number {
  background: #ffa500 !important;
  color: #ffffff !important;
}

.dark-theme .event-days-block.past .days-unit {
  background: #ff9500 !important;
  color: #ffffff !important;
}

/* 深色主题下的事件操作按钮样式 */
.dark-theme .event-actions {
  background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.8) 50%) !important;
}

.dark-theme .edit-btn {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.dark-theme .edit-btn:hover {
  background: #667eea !important;
  color: white !important;
}

.dark-theme .delete-btn {
  background: linear-gradient(135deg, rgba(245, 108, 108, 0.2) 0%, rgba(230, 162, 60, 0.2) 100%) !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

.dark-theme .delete-btn:hover {
  background: #f56c6c !important;
  color: white !important;
}

/* 深色主题下的移动端适配 */
@media (max-width: 768px) {
  .dark-theme .header-content .category-selector {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
  }
}

.category-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 10px 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.category-selector:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.category-title {
  font-size: 16px;
  font-weight: 600;
  color: white;
}

.search-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-toggle-btn {
  color: white;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
}

.search-toggle-btn:hover {
  color: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

.search-full-container {
  width: 100%;
  transition: all 0.3s ease;
  animation: searchFullSlideIn 0.3s ease-out;
}

@keyframes searchFullSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.search-full-input .el-input__wrapper {
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid transparent;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  height: 48px;
}

.search-full-input .el-input__wrapper:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.search-full-input .el-input__wrapper.is-focus {
  box-shadow: 0 6px 24px rgba(102, 126, 234, 0.25);
  border-color: rgba(102, 126, 234, 0.3);
  transform: translateY(-1px);
}

.main {
  padding: 10px;
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(3px);
  border-radius: 0;
  /* min-height: calc(100vh - 60px); */
}

.events-container {
  max-width: 800px;
  margin: 0 auto;
}

.search-tip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(102, 126, 234, 0.2);
}

.search-tip-icon {
  color: #667eea;
  font-size: 16px;
}

/* 加载指示器样式 */
.loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: #666;
  font-size: 14px;
}

.loading-icon {
  margin-right: 8px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.no-more-indicator {
  text-align: center;
  padding: 20px;
  color: #999;
  font-size: 14px;
}

.search-tip-text {
  color: #667eea;
  font-weight: 600;
  font-size: 14px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-description {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.search-empty-text {
  color: #f56c6c;
  font-size: 14px;
  margin: 0;
  padding: 12px 20px;
  background: linear-gradient(135deg, rgba(245, 108, 108, 0.05) 0%, rgba(230, 162, 60, 0.05) 100%);
  border: 1px solid rgba(245, 108, 108, 0.15);
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.category-empty-text {
  color: #409eff;
  font-size: 14px;
  margin: 0;
  padding: 12px 20px;
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.05) 0%, rgba(100, 108, 255, 0.05) 100%);
  border: 1px solid rgba(64, 158, 255, 0.15);
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.all-empty-text {
  color: #67c23a;
  font-size: 14px;
  margin: 0;
  padding: 12px 20px;
  background: linear-gradient(135deg, rgba(103, 194, 58, 0.05) 0%, rgba(144, 147, 153, 0.05) 100%);
  border: 1px solid rgba(103, 194, 58, 0.15);
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.events-list {
  display: flex;
  flex-direction: column;
  /* gap: 16px; */  /* 正常使用 */
  gap: 30px;   /* 解决打包app 无法下滑滚动问题 适配App端  */
}

.event-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border-radius: 8px;
  padding: 0;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid #e8e8e8;
}

.event-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: rgba(102, 126, 234, 0.3);
}

.event-item.pinned {
  border-left: 4px solid #e6a23c;
}

.event-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.event-item:hover::before {
  opacity: 1;
}

.event-item.pinned::before {
  background: linear-gradient(90deg, #e6a23c 0%, #f56c6c 100%);
  opacity: 1;
}

.event-text-area {
  flex: 0 0 80%;
  cursor: pointer;
  padding: 15px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 80px;
}

.event-header {
  margin-bottom: 4px;
}

.event-name {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  line-height: 1.4;
  margin: 0;
}

.event-item:hover .event-name {
  color: #667eea;
}

.event-pinned {
  color: #e6a23c;
  font-size: 16px;
}

.event-status {
  /* font-size: 12px; */
  color: #909399;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.event-category {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 400;
}

.event-days-block {
  flex: 0 0 20%;
  height: 80px;
  border-radius: 0 8px 8px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  flex-shrink: 0;
}

/* 移动端样式调整 */
@media (max-width: 768px) {
  html.app-5plus .header {
    padding-top: var(--status-bar-height);
    height: calc(55px + var(--status-bar-height));
  }
  
  .header-content {
    flex-direction: row;
    padding: 10px 0;
    justify-content: space-between;
    align-items: center;
    position: relative;
  }
  
  /* 移动端分类选择器居中 */
  .header-content .category-selector {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  }
  
  .category-selector {
    padding: 8px 16px;
    min-width: 90px;
    text-align: center;
    border-radius: 12px;
  }
  
  .category-title {
    font-size: 15px;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    max-width: 112px; /* 8个汉字的宽度 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* 移动端搜索按钮样式 */
  .search-toggle-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* 移动端返回按钮样式 */
  .header .el-button {
    min-width: 60px;
    height: 36px;
    border-radius: 8px;
    font-size: 14px;
  }
  
  .event-item {
    margin-bottom: 6px;
  }
  
  .event-text-area {
    padding: 6px 10px;
    min-height: 50px;
  }
  
  .event-days-block {
    flex: 0 0 20%;
    height: 50px;
  }
  
  .days-number {
    font-size: 18px;
  }
  
  .days-unit {
    font-size: 10px;
  }
}

.event-days-block:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* 未来事件样式 - 冷色调 */
.event-days-block.future .days-number {
  background: #5489f8;
  color: #ffffff;
}

.event-days-block.future .days-unit {
  background: #4378e8;
  color: #ffffff;
}

/* 过去事件样式 - 暖色调 */
.event-days-block.past .days-number {
  background: #ffa500;
  color: #ffffff;
}

.event-days-block.past .days-unit {
  background: #ff9500;
  color: #ffffff;
}

.days-number {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 0;
  width: 60%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.days-unit {
  font-size: 14px;
  font-weight: 400;
  width: 40%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 8px 8px 0;
}

/* 事件操作按钮 */
.event-actions {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.95) 50%);
   opacity: 0;
   transform: translateX(100%);
   transition: all 0.3s ease;
}

.event-item:hover .event-actions {
   opacity: 1;
   transform: translateX(0);
}

.edit-btn {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s ease;
   border: none;
   background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
   color: #667eea;
}

.edit-btn:hover {
   background: #667eea;
   color: white;
   transform: scale(1.1);
}

.delete-btn {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s ease;
   border: none;
   background: linear-gradient(135deg, rgba(245, 108, 108, 0.1) 0%, rgba(230, 162, 60, 0.1) 100%);
   color: #f56c6c;
}

.delete-btn:hover {
   background: #f56c6c;
   color: white;
   transform: scale(1.1);
}

/* 排序按钮样式 */
.move-up-btn {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s ease;
   border: none;
   background: linear-gradient(135deg, rgba(102, 187, 106, 0.1) 0%, rgba(76, 175, 80, 0.1) 100%);
   color: #66bb6a;
}

.move-up-btn:hover:not(:disabled) {
   background: #66bb6a;
   color: white;
   transform: scale(1.1);
}

.move-up-btn:disabled {
   opacity: 0.4;
   cursor: not-allowed;
   background: rgba(102, 187, 106, 0.05);
   color: rgba(102, 187, 106, 0.4);
}

.move-down-btn {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s ease;
   border: none;
   background: linear-gradient(135deg, rgba(239, 108, 0, 0.1) 0%, rgba(255, 152, 0, 0.1) 100%);
   color: #ef6c00;
}

.move-down-btn:hover:not(:disabled) {
   background: #ef6c00;
   color: white;
   transform: scale(1.1);
}

.move-down-btn:disabled {
   opacity: 0.4;
   cursor: not-allowed;
   background: rgba(239, 108, 0, 0.05);
   color: rgba(239, 108, 0, 0.4);
}



/* 悬浮按钮 */
.fab-button {
   position: fixed;
   bottom: 80px;
   right: 20px;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
   z-index: 1000;
   backdrop-filter: blur(10px);
}

.fab-button:hover {
   background: rgba(255, 255, 255, 0.2);
   border-color: rgba(255, 255, 255, 0.3);
   transform: scale(1.1) translateY(-2px);
   box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

.fab-button:active {
   transform: scale(0.95);
}

.fab-button .el-icon {
   font-size: 24px;
   animation: fabIconFloat 2s ease-in-out infinite;
}

/* 深色主题下的悬浮新增按钮样式 */
.dark-theme .fab-button {
   background: rgba(255, 255, 255, 0.08);
   border-color: rgba(255, 255, 255, 0.15);
}

.dark-theme .fab-button:hover {
   background: rgba(255, 255, 255, 0.15);
   border-color: rgba(255, 255, 255, 0.25);
}

/* 悬浮回到顶部按钮样式 */
.back-to-top-button {
   position: fixed;
   bottom: 150px;
   right: 20px;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
   z-index: 1000;
   backdrop-filter: blur(10px);
}

.back-to-top-button:hover {
   background: rgba(255, 255, 255, 0.2);
   border-color: rgba(255, 255, 255, 0.3);
   transform: scale(1.1) translateY(-2px);
   box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

.back-to-top-button:active {
   transform: scale(0.95);
}

.back-to-top-button .el-icon {
   font-size: 24px;
   animation: fabIconFloat 2s ease-in-out infinite;
}

/* 深色主题下的悬浮回到顶部按钮样式 */
.dark-theme .back-to-top-button {
   background: rgba(255, 255, 255, 0.08);
   border-color: rgba(255, 255, 255, 0.15);
}

.dark-theme .back-to-top-button:hover {
   background: rgba(255, 255, 255, 0.15);
   border-color: rgba(255, 255, 255, 0.25);
}

/* 深色主题下的分类管理弹窗样式 */
.dark-theme .category-modal ::v-deep .el-dialog {
   background: #1f1f1f;
   border-color: #333333;
}

.dark-theme .category-modal ::v-deep .el-dialog__body {
   background-color: #1f1f1f;
}

.dark-theme .category-modal ::v-deep .el-dialog__header {
   background: #292929;
   border-bottom-color: #333333;
}

.dark-theme .category-modal ::v-deep .el-dialog__title {
   color: #ffffff;
}

.dark-theme .category-modal ::v-deep .el-dialog__headerbtn .el-dialog__close {
   color: #999999;
}

.dark-theme .category-modal ::v-deep .el-dialog__headerbtn .el-dialog__close:hover {
   color: #ffffff;
}

.dark-theme .category-list {
   background: #1a1a1a;
   border: 1px solid #333333;
}

.dark-theme .category-item {
   background-color: #1a1a1a;
   border-bottom-color: #292929;
   color: #ffffff;
}

.dark-theme .category-item:hover {
   background-color: #292929;
}

.dark-theme .category-name {
   color: #ffffff;
}

.dark-theme .category-count {
   color: #999999;
   background-color: #292929;
}

.dark-theme .category-info:hover {
   background: #333333;
}

.dark-theme .move-up-btn, 
.dark-theme .move-down-btn {
   background: #292929;
   border-color: #333333;
   color: #999999;
}

.dark-theme .move-up-btn:hover:not(:disabled), 
.dark-theme .move-down-btn:hover:not(:disabled) {
   background: #333333;
   border-color: #409eff;
}

.dark-theme .move-up-btn:disabled, 
.dark-theme .move-down-btn:disabled {
   background: #292929;
   color: #555555;
   border-color: #333333;
}

.dark-theme .delete-category-btn {
   background: #292929;
   border-color: #333333;
   color: #999999;
}

.dark-theme .delete-category-btn:hover {
   background: #332222;
   border-color: #f56c6c;
}

.dark-theme .category-modal-actions {
   background-color: #292929;
   border-top-color: #333333;
}

/* 深色主题下的事件管理弹窗样式 */
.dark-theme .event-modal ::v-deep .el-dialog {
   background: #1f1f1f;
   border-color: #333333;
}

.dark-theme .event-modal ::v-deep .el-dialog__body {
   background-color: #1f1f1f;
}

.dark-theme .event-modal ::v-deep .el-dialog__header {
   background: #292929;
   border-bottom-color: #333333;
}

.dark-theme .event-modal ::v-deep .el-dialog__title {
   color: #ffffff;
}

.dark-theme .event-modal ::v-deep .el-dialog__headerbtn .el-dialog__close {
   color: #999999;
}

.dark-theme .event-modal ::v-deep .el-dialog__headerbtn .el-dialog__close:hover {
   color: #ffffff;
}

.dark-theme .event-modal ::v-deep .el-form-item__label {
   color: #ffffff;
}

.dark-theme .event-modal ::v-deep .el-input__wrapper {
   background: #292929;
   border-color: #333333;
}

.dark-theme .event-modal ::v-deep .el-input__wrapper:hover {
   border-color: #409eff;
}

.dark-theme .event-modal ::v-deep .el-input__wrapper.is-focus {
   border-color: #409eff;
   box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.dark-theme .event-modal ::v-deep .el-input__inner {
   color: #ffffff;
   background: transparent;
}

.dark-theme .event-modal ::v-deep .el-input__inner::placeholder {
   color: #666666;
}

.dark-theme .event-modal ::v-deep .el-select .el-input__wrapper {
   background: #292929;
   border-color: #333333;
}

.dark-theme .event-modal ::v-deep .el-select .el-input__inner {
   color: #ffffff;
   background: transparent;
}

.dark-theme .event-modal ::v-deep .el-date-editor .el-input__wrapper {
   background: #292929;
   border-color: #333333;
}

.dark-theme .event-modal ::v-deep .el-date-editor .el-input__inner {
   color: #ffffff;
   background: transparent;
}

.dark-theme .event-modal ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
   background-color: #409eff;
   border-color: #409eff;
}

.dark-theme .event-modal ::v-deep .el-checkbox__inner {
   background-color: #292929;
   border-color: #333333;
}

.dark-theme .event-modal ::v-deep .el-checkbox__inner:after {
   border-color: #ffffff;
}

.dark-theme .event-modal ::v-deep .el-checkbox__label {
   color: #ffffff;
}

.dark-theme .event-modal ::v-deep .el-button--default {
   background: #292929;
   border-color: #333333;
   color: #ffffff;
}

.dark-theme .event-modal ::v-deep .el-button--default:hover {
   background: #333333;
   border-color: #409eff;
   color: #ffffff;
}

.dark-theme .event-modal ::v-deep .el-button--primary {
   background: #409eff;
   border-color: #409eff;
   color: #ffffff;
}

.dark-theme .event-modal ::v-deep .el-button--primary:hover {
   background: #66b1ff;
   border-color: #66b1ff;
}

/* 深色主题下的搜索相关样式 */
.dark-theme .search-toggle-btn {
   color: #e0e0e0;
}

.dark-theme .search-toggle-btn:hover {
   color: #ffffff;
}

.dark-theme .search-full-input .el-input__wrapper {
   background-color: rgba(45, 45, 45, 0.95);
   border-color: rgba(255, 255, 255, 0.1);
}

.dark-theme .search-full-input .el-input__wrapper:hover {
   border-color: rgba(255, 255, 255, 0.2);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.dark-theme .search-full-input .el-input__wrapper.is-focus {
   border-color: rgba(102, 126, 234, 0.6);
   box-shadow: 0 6px 24px rgba(102, 126, 234, 0.4);
}

.dark-theme .search-full-input .el-input__inner {
   color: #ffffff;
}

.dark-theme .search-full-input .el-input__inner::placeholder {
   color: #999999;
}

.dark-theme .search-full-input .search-icon {
   color: #999999;
}

.dark-theme .search-full-input .el-input__wrapper.is-focus .search-icon {
   color: #667eea;
}

.dark-theme .cancel-search-btn {
   color: #999999;
}

.dark-theme .cancel-search-btn:hover {
   color: #ffffff;
   background-color: rgba(255, 255, 255, 0.1);
}

/* 深色主题下的事件列表样式 */
.dark-theme .event-item {
   background: #2a2a2a;
   border-color: #3d3d3d;
}

.dark-theme .event-item:hover {
   background: #333333;
   border-color: rgba(102, 126, 234, 0.5);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.dark-theme .event-text-area {
   color: #e0e0e0;
}

.dark-theme .event-status {
   color: #b0b0b0;
}

.dark-theme .event-name {
   color: #ffffff;
}

/* 深色主题下的天数块样式 */
.dark-theme .event-days-block {
   background: linear-gradient(135deg, #409eff 0%, #667eea 100%);
   color: #ffffff;
}

.dark-theme .event-days-block.past {
   background: linear-gradient(135deg, #909399 0%, #606266 100%);
}

.dark-theme .days-number {
   color: #ffffff;
}

.dark-theme .days-unit {
   color: rgba(255, 255, 255, 0.8);
}

/* 深色主题下的滑动操作按钮样式 */
.dark-theme .event-actions {
   background: rgba(42, 42, 42, 0.95);
   backdrop-filter: blur(10px);
}

.dark-theme .move-up-btn,
.dark-theme .move-down-btn,
.dark-theme .edit-btn,
.dark-theme .delete-btn {
   background: #3d3d3d;
   border-color: #4d4d4d;
   color: #b0b0b0;
}

.dark-theme .move-up-btn:hover:not(:disabled),
.dark-theme .move-down-btn:hover:not(:disabled) {
   background: #4d4d4d;
   border-color: #409eff;
   color: #409eff;
}

.dark-theme .move-up-btn:disabled,
.dark-theme .move-down-btn:disabled {
   background: #2a2a2a;
   border-color: #3d3d3d;
   color: #666666;
}

.dark-theme .edit-btn:hover {
   background: #4d4d4d;
   border-color: #67c23a;
   color: #67c23a;
}

.dark-theme .delete-btn:hover {
   background: #4d4d4d;
   border-color: #f56c6c;
   color: #f56c6c;
}

/* 深色主题下的状态指示器样式 */
.dark-theme .loading-indicator {
   color: #b0b0b0;
}

.dark-theme .loading-icon {
   color: #409eff;
}

.dark-theme .no-more-indicator {
   color: #666666;
}

.dark-theme .empty-state {
   color: #b0b0b0;
}

.dark-theme .empty-description {
   color: #e0e0e0;
}

.dark-theme .search-empty-text {
   color: #f56c6c;
   background: linear-gradient(135deg, rgba(245, 108, 108, 0.1) 0%, rgba(230, 162, 60, 0.1) 100%);
   border-color: rgba(245, 108, 108, 0.3);
}

.dark-theme .category-empty-text {
   color: #409eff;
   background: linear-gradient(135deg, rgba(64, 158, 255, 0.1) 0%, rgba(100, 108, 255, 0.1) 100%);
   border-color: rgba(64, 158, 255, 0.3);
}

.dark-theme .all-empty-text {
   color: #67c23a;
   background: linear-gradient(135deg, rgba(103, 194, 58, 0.1) 0%, rgba(144, 147, 153, 0.1) 100%);
   border-color: rgba(103, 194, 58, 0.3);
}

.dark-theme .search-tip {
   background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
   border-color: rgba(102, 126, 234, 0.3);
   color: #e0e0e0;
}

.dark-theme .search-tip-text {
   color: #667eea;
}

/* 深色主题下的背景装饰 */
.dark-theme .bg-circle-1 {
   background: radial-gradient(circle, rgba(102, 126, 234, 0.15) 0%, transparent 70%);
}

.dark-theme .bg-circle-2 {
   background: radial-gradient(circle, rgba(118, 75, 162, 0.15) 0%, transparent 70%);
}

.dark-theme .bg-circle-3 {
   background: radial-gradient(circle, rgba(64, 158, 255, 0.1) 0%, transparent 70%);
}

/* 深色主题下的置顶样式 */
.dark-theme .event-item.pinned {
   border-left-color: #e6a23c;
}

.dark-theme .event-item:hover .event-name {
   color: #667eea;
}

.dark-theme .event-pinned {
   color: #e6a23c;
}

@keyframes fabIconFloat {
   0%, 100% {
     transform: translateY(0);
   }
   50% {
     transform: translateY(-2px);
   }
}

/* 分类管理弹窗样式 */
.category-modal ::v-deep .el-dialog {
   border-radius: 12px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
   overflow: hidden;
   background: #ffffff;
   border: 1px solid #e8e8e8;
}
/* 桌面端弹窗宽度限制 */
  @media (min-width: 768px) {
    ::v-deep .el-dialog.category-modal,
    ::v-deep .el-dialog.event-modal {
      width: 50% !important;
      max-width: 500px;
    }
  }
  @media (max-width: 768px) {
    /* 确保移动端宽度优先 */
    ::v-deep .el-dialog.event-modal.el-dialog--center,
    .el-dialog.event-modal.el-dialog--center {
      width: 95% !important;
      max-width: 100% !important;
      margin: 10px auto !important;
      --el-dialog-width: 95% !important;
    }
    ::v-deep .el-dialog.category-modal.el-dialog--center,
    .el-dialog.category-modal.el-dialog--center {
      width: 95% !important;
      max-width: 100% !important;
      margin: 10px auto !important;
      --el-dialog-width: 95% !important;
    }
  }
  /* 移动端弹窗宽度 */
  @media (max-width: 768px) {
    ::v-deep .el-dialog {
      --el-dialog-width: 95% !important;
      width: var(--el-dialog-width) !important;
      max-width: 100% !important;
      margin: 10px auto !important;
    }
  }

.category-modal ::v-deep .el-dialog__header {
   background: #f5f7fa;
   color: #303133;
   padding: 20px 24px;
   margin: 0;
   border-bottom: 1px solid #e8e8e8;
}

.category-modal ::v-deep .el-dialog__title {
   color: #303133;
   font-weight: 500;
   font-size: 16px;
}

.category-modal ::v-deep .el-dialog__headerbtn .el-dialog__close {
   color: #909399;
   font-size: 18px;
}

.category-modal ::v-deep .el-dialog__headerbtn .el-dialog__close:hover {
   color: #606266;
}

.category-modal ::v-deep .el-dialog__body {
   padding: 20px 24px;
   background-color: #ffffff;
}

.category-list {
   max-height: 400px;
   overflow-y: auto;
   border-radius: 6px;
   background: #ffffff;
   border: 1px solid #e8e8e8;
}

.category-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 12px 16px;
   border-bottom: 1px solid #f0f0f0;
   transition: all 0.2s ease;
   cursor: pointer;
   background-color: #ffffff;
}

.category-item:hover {
   background-color: #f5f7fa;
   transform: translateX(2px);
}

.category-item:last-child {
   border-bottom: none;
}

.category-info {
   display: flex;
   align-items: center;
   gap: 8px;
   cursor: pointer;
   flex: 1;
   padding: 4px;
   border-radius: 4px;
   transition: all 0.2s ease;
}

.category-info:hover {
   background: #f0f2f5;
}

.category-name {
   font-size: 14px;
   font-weight: 500;
   color: #303133;
}

.category-count {
   font-size: 12px;
   color: #909399;
   background-color: #f5f7fa;
   padding: 2px 6px;
   border-radius: 10px;
   font-weight: 400;
}

.category-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.category-sort-buttons {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: all 0.2s ease;
}

.category-item:hover .category-sort-buttons {
  opacity: 1;
}

.move-up-btn, .move-down-btn {
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 3px;
  padding: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  width: 20px;
  height: 20px;
  color: #909399;
}

.move-up-btn:hover:not(:disabled), .move-down-btn:hover:not(:disabled) {
  background: #ecf5ff;
  color: #409eff;
  border-color: #d9ecff;
}

.move-up-btn:disabled, .move-down-btn:disabled {
  background: #f5f7fa;
  color: #c0c4cc;
  cursor: not-allowed;
  border-color: #ebeef5;
}

.current-category-icon {
  color: #409eff;
  font-size: 16px;
}

.delete-category-btn {
   opacity: 0;
   transition: all 0.2s ease;
   border-radius: 3px;
   width: 24px;
   height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #ffffff;
   border: 1px solid #dcdfe6;
   color: #909399;
}

.category-item:hover .delete-category-btn {
   opacity: 1;
   transform: scale(1.05);
}

.delete-category-btn:hover {
   background: #fef0f0;
   color: #f56c6c;
   border-color: #fbc4c4;
   transform: scale(1.1);
}

.category-modal-actions {
   display: flex;
   justify-content: flex-end;
   gap: 12px;
   padding: 20px 24px;
   background-color: rgba(255, 255, 255, 0.15);
   border-top: 1px solid rgba(255, 255, 255, 0.2);
}



/* 搜索提示词样式 */
.search-tip {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 20px;
   padding: 14px 18px;
   background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
   border: 1px solid rgba(102, 126, 234, 0.15);
   border-radius: 12px;
   box-shadow: 0 4px 12px rgba(102, 126, 234, 0.08);
   color: #303133;
   font-size: 14px;
   font-weight: 500;
   backdrop-filter: blur(10px);
   animation: searchTipFadeIn 0.3s ease-out;
}

@keyframes searchTipFadeIn {
   from {
     opacity: 0;
     transform: translateY(-10px);
   }
   to {
     opacity: 1;
     transform: translateY(0);
   }
}

.search-tip-icon {
   color: #667eea;
   font-size: 20px;
   animation: searchIconPulse 2s infinite;
}

@keyframes searchIconPulse {
   0%, 100% {
     transform: scale(1);
   }
   50% {
     transform: scale(1.1);
   }
}

.search-tip-text {
   color: #303133;
   font-weight: 600;
}
</style>
<style>
  
  /* 默认弹窗宽度 */
  /* .el-dialog {
    --el-dialog-width: 30% !important;
    max-width: 100% !important;
  } */

  /* 移动端弹窗宽度 */
  @media (max-width: 768px) {
    /* 确保所有弹窗在移动端宽度为95% */
    .el-dialog {
      width: 95% !important;
      max-width: 100% !important;
      /* margin: 10px auto !important; */    
      margin: 100px auto !important;     /* 适配App端 */
      --el-dialog-width: 95% !important;
    }
    /* 为append-to-body的弹窗额外添加规则 */
    .el-dialog.event-modal,
    .el-dialog.category-modal {
      width: 95% !important;
      max-width: 100% !important;
      /* margin: 10px auto !important; */    
      margin: 100px auto !important;     /* 适配App端 */
      --el-dialog-width: 95% !important;
    }
  }
</style>


